<template>
  <div class="DataBank">
    <div class="DataBankHeader">
      <div class="title">
        <h3 class="h3">基础资料</h3>
      </div>
      <div class="dataList">
        <p class="dataListName">用户名: <i class="UserName">陈鲁豫</i></p>
        <p class="dataListName">性别: <i class="UserName">男/女</i></p>
        <div class="shangchuan">
          <p class="dataList-img">头像:</p>
          <div class="shangchuan-a">
            <div class="UploadBox">
              <img class="UploadImg" src="" alt="" />
            </div>
            <div class="UploadBtn">
              <el-upload
                class="upload-demo"
                action="https://jsonplaceholder.typicode.com/posts/"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                multiple
                :limit="3"
                :on-exceed="handleExceed"
                :file-list="fileList"
              >
                <el-button class="Uploadprimary" size="small" type="primary"
                  >上传头像</el-button
                >
                <div slot="tip" class="el-upload__tip">
                  只能上传jpg/png文件，且不超过500kb
                </div>
              </el-upload>
            </div>
          </div>
        </div>
        <div class="dataListName">
          <div class="InputBox-a">登陆密码:</div>
          <div class="InputBox-b">
            <input class="InputShu" type="text" />
            <p class="pwdText">*若不修改密码，请留空</p>
          </div>
        </div>
        <div class="dataListName">
          <div class="InputBox-a">年龄:</div>
          <div class="InputBox-b">
            <input class="InputShu" type="text" />
          </div>
        </div>
        <div class="dataListName">
          <div class="InputBox-a">身高:</div>
          <div class="InputBox-b">
            <input class="InputShu" type="text" />
          </div>
        </div>
        <div class="dataListName">
          <div class="InputBox-a">体重:</div>
          <div class="InputBox-b">
            <input class="InputShu" type="text" />
          </div>
        </div>
        <div class="dataListName">
          <div class="InputBox-a">电话:</div>
          <div class="InputBox-b">
            <input class="InputShu" type="text" />
          </div>
        </div>
        <div class="dataListName">
          <div class="InputBox-a">微信号:</div>
          <div class="InputBox-b">
            <input class="InputShu" type="text" />
          </div>
        </div>
        <div class="dataListName">
          <div class="InputBox-a">风格:</div>
          <div class="InputBox-b">
            <div class="InputBtn">
              <input
                class="InputShu"
                type="checkbox"
                name="checkbox1"
                value="西式婚礼"
              />西式婚礼
              <input
                class="InputShu"
                type="checkbox"
                name="checkbox2"
                value="中式婚礼"
              />中式婚礼
              <input
                class="InputShu"
                type="checkbox"
                name="checkbox3"
                value="汉唐婚礼"
              />汉唐婚礼
              <input
                class="InputShu"
                type="checkbox"
                name="checkbox4"
                value="商务主持"
              />商务主持
              <input
                class="InputShu"
                type="checkbox"
                name="checkbox4"
                value="宴会主持"
              />宴会主持
            </div>
          </div>
        </div>
      </div>
      <div class="title">
        <h3 class="h3">视频资料</h3>
      </div>
      <div class="VideoData">
        <div class="Video-a">
          <h5 class="h5">视频一:</h5>
          <p class="inp">
            标题: <input class="inp-a" type="text" />(最多十个汉字)
          </p>
          <p class="inp">视频链接: <input type="text" /></p>
        </div>
        <div class="Video-a">
          <h5 class="h5">视频二:</h5>
          <p class="inp">
            标题: <input class="inp-a" type="text" />(最多十个汉字)
          </p>
          <p class="inp">视频链接: <input type="text" /></p>
        </div>
        <div class="Video-a">
          <h5 class="h5">视频三:</h5>
          <p class="inp">
            标题: <input class="inp-a" type="text" />(最多十个汉字)
          </p>
          <p class="inp">视频链接: <input type="text" /></p>
        </div>
      </div>
      <div class="title">
        <h3 class="h3">个人介绍</h3>
      </div>
      <div class="Editer">
        <div class="Editer-word">
          <WangWord />
        </div>
        <div class="Editer-a">
          <el-button type="primary">提 交</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import WangWord from "../../../components/WangWord";

export default {
  data() {
    return {
      fileList: [
        {
          name: "food.jpeg",
          url:
            "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
        {
          name: "food2.jpeg",
          url:
            "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
      ],
    };
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
  },
  components: {
    WangWord,
  },
};
</script>

<style scoped lang = "less">
.DataBank {
  width: 90%;
  border: 1px solid #333;
  background-color: #ffffff;
}
.DataBankHeader {
  width: 90%;
}
.h3 {
  margin-left: 10px;
  font-size: 20px;
}
.title {
  margin-top: 10px;
  margin-left: 100px;
  height: 50px;
  line-height: 50px;
  background-color: #f2f2f2;
}
.dataList {
  margin: 10px 10px 10px;
}
.dataListName {
  width: 20%;
  margin-left: 120px;
  margin-top: 20px;
}
.dataList-img {
  width: 10%;
  margin-left: 120px;
  margin-top: 50px;
}
.UserName {
  margin-top: 20px;
}
.shangchuan {
  width: 100%;
  /* position: relative; */
}
.UploadBox {
  width: 150px;
  height: 110px;
  background-color: sandybrown;
  border: 1px solid #333;
}
.shangchuan-a {
  /* position: absolute; */

  margin-left: 200px;
  margin-top: -50px;
}
.Uploadprimary {
  margin: 10px 10px;
}
.InputBox-b {
  width: 100%;
  margin-left: 100px;
  margin-top: -21px;
}
.InputBtn {
  width: 800px;
  font-size: 12px;
}
.pwdText {
  width: 300px;
  margin-left: 180px;
  margin-top: -20px;
  font-size: 12px;
  color: red;
}
.Video-a {
  margin-top: 20px;
  margin-left: 150px;
}
.h5 {
  font-size: 16px;
  margin-top: 5px;
}
.inp {
  margin-top: 5px;
}
.inp-a {
  margin-left: 33px;
}
.Editer-word {
  margin-top: 20px;
  margin-left: 100px;
}
.Editer-a {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
}
</style>